<template>
  <div class="goodsMng">
    <!-- 控制栏 -->
    <el-card class="box-card">
      <el-row
        type="flex"
        justify="end"
      >
        <el-button
          type="primary"
          @click="$router.push(`goodsMng/opGoods/noquery/add`)"
        >新增商品</el-button>
        <el-button
          type="success"
          @click="centerDialogVisible = true"
        >批量录入库存</el-button>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <!-- 筛选栏 -->
      <goods-select
        @getgoodslist="getGoodsList"
        :query-params="queryParams"
      ></goods-select>
      <!-- 商品列表 -->
      <goods-table
        :table-data="tableData"
        @getgoodslist="getGoodsList"
      ></goods-table>
      <!-- 分页组件 -->
      <el-row
        type="flex"
        justify="center"
      >
        <el-pagination
          background
          layout="prev, pager, next"
          :total="queryParams.total"
          :page-size="queryParams.pagesize"
          style="margin-top: 20px;"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 批量录入库存 -->
    <transition
      enter-active-class="animated rotateInDownRight"
      leave-active-class="animated zoomOutRight"
    >
      <el-dialog
        title="批量录入库存"
        :visible.sync="centerDialogVisible"
        width="50%"
        style="animation-duration: 500ms"
        v-if="centerDialogVisible"
      >
        <goods-stock-upload
          :center-dialog-visible.sync="centerDialogVisible"
          @success="uploadSuccess"
        ></goods-stock-upload>
      </el-dialog>
    </transition>
  </div>
</template>

<script>
import goodsTable from './components/goodsTable'
import goodsSelect from './components/goodsSelect'
import goodsStockUpload from './components/goodsStockUpload'
import { getGoodsList } from '@/api/goods'
export default {
  data () {
    return {
      centerDialogVisible: false,
      queryParams: {
        q: '',  // 模糊查询
        total: 0, // 总数据条数
        page: 1, // 当前页数
        pagesize: 6, // 每页展示条数
        goodsType: '', // 商品类型
        priseBegin: '', // 价格区间
        priseEnd: '' // 价格区间结束
      },
      tableData: []
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    /* 
      批量修改库存成功
    */
    uploadSuccess () {
      this.centerDialogVisible = false
      this.getGoodsList()
    },
    /*
       获取 商品 列表 
    */
    async getGoodsList () {
      // 获取参数字符串
      const paramsStr = this.getPageStr(this.queryParams.pagesize, this.queryParams.page, this.queryParams.q, { goodsType: this.queryParams.goodsType, goodsPrice_gte: this.queryParams.priseBegin, goodsPrice_lte: this.queryParams.priseEnd })
      // 获取查询所有的字符串
      const paramsAllStr = this.getPageStr('', '', this.queryParams.q, { goodsType: this.queryParams.goodsType, goodsPrice_gte: this.queryParams.priseBegin, goodsPrice_lte: this.queryParams.priseEnd })
      // 查询到数据
      this.tableData = await getGoodsList(paramsStr)
      // 查询到总数
      await getGoodsList(paramsAllStr).then(data => this.queryParams.total = data.length)
    },
    /* 
      页码发生改变时触发该函数
    */
    handleCurrentChange (val) {
      this.queryParams.page = val
      this.getGoodsList()
    }
  },
  components: {
    goodsTable, goodsSelect, goodsStockUpload
  }
}
</script>

<style lang="scss" scoped>
.goodsMng {
  padding: 30px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
